<template>
    <form id="lovetalk">
        <div class="form-group">
            <h5>写下你的话吧~</h5>
            <input
              type="text"
              class="form-control txt"
              placeholder="username"
              v-model="data.username">
            <textarea
              class="form-control text"
              rows="3"
              placeholder="请输入您要留言的内容"
              v-model="data.content"></textarea>
            <button
              type="button"
              class="btn btn-success btn-lg"
              style="width:100%"
              @click="add">立即提交</button>
        </div>
        <h2 v-show="data.isShow">留言板</h2>
        <ul class="second">
            <li
              v-for="(item,index) of data.list" :key="index">
                <div class="panel panel-default">
                    <div class="panel-heading">{{item.name}}</div>
                    <div class="panel-body">
                        <p>{{item.content}}</p>
                        <div class="button-group">
                          <button
                            type="button"
                            @click="change(index,item.content)"
                            class="btn btn-info pull-right"
                            style="margin-right:5px;">修改</button>
                          <button
                            type="button"
                            @click="remove(item.content)"
                            class="btn btn-danger pull-right">删除</button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
          <!-- v-show="data.list.length!==0" -->
        <button
          type="button"
          class="alert alert-danger"
          role="alert"
          style="width:100%"
          @click="clear()">
            清空全部留言
        </button>
    </form>
  
</template>

<script setup>
import { reactive } from 'vue';
import axios from "axios"

//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'


//创建仓库对象
const store=useCounterStore()
let {editArr}=storeToRefs(store)


const data = reactive({
  username: "amonkey",
  content: "",
  list: [],

  newList: []
})

const getMsg = ()=> {
  axios.get(`http://localhost:9001/test/shaixuan_message.php?id=${localStorage.getItem("token")}`).then(re=> {
    console.log(re.data)
    data.list = re.data


  }).catch(e=> {
    console.log(e)
  })
}
getMsg()

const add = ()=> {
  if (data.username && data.content) {
    // data.newList.push({
    //   id: data.list.length + 1,
    //   name: data.username,
    //   content: data.content
    // })

    axios.get(`http://localhost:9001/test/insert.php?num=${localStorage.getItem("token")}&name=${data.username}&text=${data.content}`).then(re=> {
      console.log("success");
    }).catch(e=> {
      console.log(e);
    })

    getMsg()
    data.content = ""
  } else {
    alert("请输入正确的留言")
  }
}

const remove = (data)=> {
  // data.newList.splice(index, 1)
  console.log(data);
  axios.get(`http://localhost:9001/test/delete_user_msg.php?id=${localStorage.getItem("token")}&content=${data}`).then(re=> {
    console.log(re.data);
  }).catch(e=> {
    console.log(e);
  })

  getMsg()
}

const change = (index, item)=> {
  let val = prompt("请输入您要更改的内容")
  // data.list[index].content = val

  // console.log(item);
  // console.log(val);

  axios.get(`http://localhost:9001/test/update_user_msg.php?before=${item}&after=${val}`).then(re=> {
    // console.log("success");
    // console.log(re.data);
  }).catch(e=> {
    console.log(e);
  })

  getMsg()
}

const clear = ()=> {
  data.list = []
  axios.get(`http://localhost:9001/test/delete_message.php?id=${localStorage.getItem("token")}`).then(re=> {
    console.log("success");
  }).catch(e=> {
    console.log(e);
  })
}

</script>

<style scoped>
ul {
  padding-left: 0;
  margin-top: 20px;
}

ul li {
    list-style: none;
    width: 100%;
    margin-bottom: 10px;
    border: 2px solid #eee;
}


form {
    max-width: 600px;
    margin: 20px auto;
}

h2 {
  margin-top: 20px;
}

.txt {
    margin-bottom: 15px;
}

.text {
    margin-bottom: 15px;
}

.form-group {
    text-align: center;
}

.panel {
  max-width: 600px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}
.panel-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

@media (max-width: 428px) {
  #lovetalk {
    padding: 0 10px;
  }
  

}

</style>